<template>
  <div class="orderBox">
    <div class="title">订单管理</div>
    <div class="btn">
      <el-button-group>
        <el-button type="danger" @click="getAllLists">全部</el-button>
        <el-button type="primary" @click="getPaidLists('待支付')">待支付</el-button>
        <el-button type="primary" @click="getPaidLists('待派单')">待派单</el-button>
        <el-button type="primary" @click="getPaidLists('派送中')">派送中</el-button>
        <el-button type="primary" @click="getPaidLists('已完成')">已完成</el-button>
      </el-button-group>
       <el-button class="addOrder" type="primary" icon="el-icon-plus" @click="addOrder">新增订单</el-button>
       <!-- 弹出框modal -->
      <el-dialog title="新增订单" center :visible.sync="orderVisible" width="50%" @close="cancel">
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="120px" class="demo-ruleForm" :label-position="'right'" status-icon>
          <el-form-item label="订单状态" prop="status" >
            <el-select v-model="ruleForm.status" clearable placeholder="请选择" @change="selectChange">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.label">
              </el-option>
            </el-select>
            <!-- <el-input v-model="ruleForm.status" style="width:300px"></el-input> -->
          </el-form-item>
          <el-form-item label="下单时间" prop="orderTime">
            <el-date-picker
              v-model="ruleForm.orderTime"
              type="datetime"
              placeholder="选择下单时间"
              :disabled="disabledEdit">
            </el-date-picker>
            <!-- <el-input v-model="ruleForm.orderTime" oninput = "value=value.replace(/[^\d]/g,'')" style="width:300px"></el-input> -->
          </el-form-item>
          <el-form-item label="(预)送达时间" prop="serverTime">
            <el-date-picker
              v-model="ruleForm.serverTime"
              type="datetime"
              placeholder="选择(预)送达时间"
              :disabled="disabledEdit2">
            </el-date-picker>
            <!-- <el-input v-model="ruleForm.serverTime" oninput = "value=value.replace(/[^\d]/g,'')" style="width:300px"></el-input> -->
          </el-form-item>
          <el-form-item label="顾客ID" prop="customerId">
            <el-input-number v-model="ruleForm.customerId" controls-position="right" :min="1"></el-input-number>
            <!-- <el-input v-model="ruleForm.customerId" oninput = "value=value.replace(/[^\d]/g,'')" style="width:300px"></el-input> -->
          </el-form-item>
          <el-form-item label="员工ID" prop="staffId">
            <el-input-number v-model="ruleForm.staffId" controls-position="right" :min="1"></el-input-number>
            <!-- <el-input v-model="ruleForm.staffId" style="width:300px"></el-input> -->
          </el-form-item>
          <el-form-item label="支付金额" prop="payment">
            <el-input-number v-model="ruleForm.payment" controls-position="right" :min="1"></el-input-number>
            <!-- <el-input v-model="ruleForm.payment" style="width:300px"></el-input> -->
          </el-form-item>
           <el-form-item label="地址" prop="address">
            <el-input v-model="ruleForm.address"  style="width:300px"></el-input>
          </el-form-item>
          <el-form-item label="联系方式" prop="phone">
            <el-input v-model="ruleForm.phone" oninput = "value=value.replace(/[^\d]/g,'')" style="width:300px"></el-input>
          </el-form-item>
          <el-form-item label="备注" prop="remark">
            <el-input v-model="ruleForm.remark" style="width:300px"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="cancel">取 消</el-button>
          <el-button type="primary" @click="addSure" >确 定</el-button>
        </div>
      </el-dialog>
      <el-dialog
        title="提示"
        :visible.sync="paidDialogVisible"
        width="30%"
        center>
        <span>{{dialogTitle}}</span>
        <span slot="footer" class="dialog-footer">
          <el-button @click="paidDialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="suretran">确 定</el-button>
        </span>
      </el-dialog>
      <!-- 派送中转已完成,待派单转派送中  -->
      <el-dialog title="请输入送达时间" center width="40%" :visible.sync="deliveryVisible">
        <el-form ref="ruleFormTw" :model="form" label-width="120px">
          <el-form-item label="(预)送达时间" prop="serverTime">
              <el-date-picker
              v-model="form.serverTime"
              type="datetime"
              placeholder="选择日期时间">
            </el-date-picker>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="cancel2">取 消</el-button>
          <el-button type="primary" @click="sureDelivery">确 定</el-button>
        </div>
      </el-dialog>
      <!-- 待支付转待派单 -->
      <el-dialog title="请输入时间" center width="40%" :visible.sync="paidVisible">
        <el-form ref="ruleFormTh" :model="form2" label-width="120px">
          <el-form-item label="下单时间" prop="orderTime">
              <el-date-picker
              v-model="form2.orderTime"
              type="datetime"
              placeholder="选择日期时间">
            </el-date-picker>
          </el-form-item>
          <!-- <el-form-item label="(预)送达时间" prop="serverTime">
              <el-date-picker
              v-model="form.serverTime"
              type="datetime"
              placeholder="选择日期时间">
            </el-date-picker>
          </el-form-item> -->
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="cancel3">取 消</el-button>
          <el-button type="primary" @click="surePaid">确 定</el-button>
        </div>
      </el-dialog>
    </div>
    <div class="dataTable">
      <el-table
        :data="tableData"
        style="width: 100%">
        <el-table-column type="expand">
          <template slot-scope="props">
            <el-form label-position="left" inline class="demo-table-expand">
              <el-form-item label="订单序号：">
                <span>{{ props.row.orderNum }}</span>
              </el-form-item>
              <el-form-item label="下单时间：">
                <span>{{ props.row.orderTime }}</span>
              </el-form-item>
              <el-form-item label="(预)送达时间：">
                <span>{{ props.row.serverTime }}</span>
              </el-form-item>
              <el-form-item label="订单状态：">
                <span>{{ props.row.status }}</span>
              </el-form-item>
              <el-form-item label="顾客ID：">
                <span>{{ props.row.customerId }}</span>
              </el-form-item>
              <el-form-item label="员工Id：">
                <span>{{ props.row.staffId }}</span>
              </el-form-item>
              <el-form-item label="支付金额：">
                <span>{{ props.row.payment }}</span>
              </el-form-item>
              <el-form-item label="地址：">
                <span>{{ props.row.address }}</span>
              </el-form-item>
              <el-form-item label="联系方式：">
                <span>{{ props.row.phone }}</span>
              </el-form-item>
              <el-form-item label="备注：">
                <span>{{ props.row.remark }}</span>
              </el-form-item>
            </el-form>
          </template>
        </el-table-column>
        <el-table-column
          label="订单序号"
          prop="orderNum">
        </el-table-column>
        <el-table-column
          label="订单状态"
          prop="status">
        </el-table-column>
        <el-table-column
          label="地址"
          prop="address">
        </el-table-column>
        <el-table-column
          label="联系方式"
          prop="phone">
        </el-table-column>
        <el-table-column
          label="操作"
          prop="operation"
          align="center">
          <template slot-scope="scope">
            <el-button
              size="mini"
              @click="handletrans(scope.$index, scope.row)">{{scope.row.operation}}</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        background
        style="float:right"
        layout="prev, pager, next"
        :total="total"
        :page-size="pageSize"
        :current-page.sync="currentPage"
        @current-change="handlerChange"
      />
    </div>
  </div>
</template>

<script>
import interfaceList from '../../utils/interface'
export default {
  name:'order',
  data(){
    return {
      pageSize:8,
      total:100,
      currentPage:1,
      status:'',
      flag:true,
      tableData: [],
      orderVisible:false,
      paidDialogVisible:false,
      disabledEdit:false,
      deliveryVisible:false,
      paidVisible:false,
      disabledEdit2:false,
      tip:'',
      id:'',
      dialogTitle:'',
      ruleForm: {
        status: '',
        orderTime: '',
        serverTime: '',
        customerId:'',
        staffId:'',
        payment:'',
        phone: '',
        address: '',
        remark: '',
      },
      form: {
        serverTime:''
      },
      form2: {
        orderTime:'',
        // serverTime:''
      },
      rules: {
        status: [
          { required: true, message: '请选择订单类型', trigger: 'blur' },
        ],
        orderTime: [
          { required: true, message: '请输入下单时间', trigger: 'blur' },
        ],
        serverTime: [
            { required: true, message: '请输入(预)送达时间', trigger: 'change' }
        ],
        customerId: [
          { required: true, message: '请输入顾客Id', trigger: 'blur' },
        ],
        staffId: [
          { required: true, message: '请输入员工Id', trigger: 'blur' },
        ],
        payment: [
          { required: true, message: '请输入支付金额', trigger: 'blur' },
        ],
        phone: [
          { required: true, message: '请输入顾客电话号码', trigger: 'blur' },
          { min: 11, max: 11, message: '要求输入11个数字', trigger: 'blur' }
        ],
        address: [
          { required: true, message: '请输入地址', trigger: 'blur' },
        ],
      },
      options: [{
          value: '选项1',
          label: '待支付'
        }, {
          value: '选项2',
          label: '待派单'
        }, {
          value: '选项3',
          label: '派送中'
        }, {
          value: '选项4',
          label: '已完成'
        }],
    }
  },
  methods:{
    // 格式化时间
    addZero(num) {
      return num < 10 ? '0' + num : num;
    },
    formatDateTime(date) {
      const time = new Date(date);
      // time.setTime(time.setHours(time.getHours() + 8))
      const Y = time.getFullYear() + '-'
      const M = this.addZero(time.getMonth() + 1) + '-'
      const D = this.addZero(time.getDate()) + ' '
      const H = this.addZero(time.getHours()) + ':'
      const m = this.addZero(time.getMinutes()) + ':'
      const S = this.addZero(time.getSeconds()) + ' '
      return Y + M + D + H + m + S
    },
    // getAllLists(){
    //   this.flag = true
    //   interfaceList.pageGetOrderLists({
    //     page:this.currentPage,
    //     pageSize:this.pageSize
    //   }).then(res => {
    //     // console.log(res)
    //     if(res.code === 200) {
    //       res.orderLists.forEach(item => {
    //         if(item.orderTime === ''){
    //           item.orderTime = '----'
    //         }else{
    //           item.orderTime = this.formatDateTime(item.orderTime)
    //         }

    //         if(item.serverTime === ''){
    //           item.serverTime = '----'
    //         }else{
    //           item.serverTime = this.formatDateTime(item.serverTime)
    //         }
    //       })
    //       this.tableData = res.orderLists
    //       this.total = res.count
    //     }
    //   })
    // },
    async getAllLists(){
      this.flag = true
      let res = await interfaceList.pageGetOrderLists({
        page:this.currentPage,
        pageSize:this.pageSize
      })
      // console.log(res)
      if(res.code === 200) {
        let data = []
        res.orderLists.forEach(item => {
          if(item.orderTime === ''){
            item.orderTime = '----'
          }else{
            item.orderTime = this.formatDateTime(item.orderTime)
          }

          if(item.serverTime === ''){
            item.serverTime = '----'
          }else{
            item.serverTime = this.formatDateTime(item.serverTime)
          }

          // debugger
          // let tip = ''
          switch(item.status){
            case '待支付':
              this.tip = '已支付？'
              break
            case '待派单':
              this.tip = '已派单？'
              break
            case '派送中':
              this.tip = '已派送？'
              break
            case '已完成':
              this.tip = '已完成？'
              break
            default:
              break
          }
          data.push({
            ...item,
            operation: this.tip
          })
        })
        this.tableData = data
        this.total = res.count
      }
    },
    getPaidLists(status){
      this.flag = false
      this.status = status
      interfaceList.pageGetPaidOrderLists({
        status:status,
        page: this.currentPage,
        pageSize: this.pageSize
      }).then(res => {
        // console.log(res)
        if(res.code === 200) {
          let data = []
          res.orderLists.forEach(item => {
            if(item.orderTime === ''){
              item.orderTime = '----'
            }else{
              item.orderTime = this.formatDateTime(item.orderTime)
            }

            if(item.serverTime === ''){
              item.serverTime = '----'
            }else{
              item.serverTime = this.formatDateTime(item.serverTime)
            }

            // let tip = ''
            switch(item.status){
              case '待支付':
              this.tip = '已支付？'
              break
            case '待派单':
              this.tip = '已派单？'
              break
            case '派送中':
              this.tip = '已派送？'
              break
            case '已完成':
              this.tip = '已完成？'
              break
            default:
              break
            }
            data.push({
              ...item,
              operation: this.tip
            })
          })
          this.tableData = data
          this.total = res.count
        }
      })
    },
    handlerChange(val){
      this.currentPage = val
      if(this.flag === true){
        this.getAllLists()
      }else{
        this.getPaidLists(this.status)
      }
    },
    cancel(){
      this.orderVisible = false
      this.$refs.ruleForm.resetFields()
    },
    cancel2(){
      this.deliveryVisible = false
      this.$refs.ruleFormTw.resetFields()
    },
    cancel3(){
      this.paidVisible = false
      this.$refs.ruleFormTh.resetFields()
    },
    addOrder(){
      this.orderVisible = true
    },
    selectChange(){
      if(this.ruleForm.status === '待支付') {
        this.disabledEdit = true
        this.disabledEdit2 = true
      }else if(this.ruleForm.status === '待派单') {
        this.disabledEdit = false
        this.disabledEdit2 = true
      }else{
        this.disabledEdit = false
        this.disabledEdit2 = false
      }
    },
    addSure(){
      // console.log(this.ruleForm)
      interfaceList.addOrder({
        orderTime: this.ruleForm.orderTime,
        serverTime: this.ruleForm.serverTime,
        status: this.ruleForm.status,
        customerId: this.ruleForm.customerId,
        staffId: this.ruleForm.staffId,
        payment: this.ruleForm.payment,
        address: this.ruleForm.address,
        phone: this.ruleForm.phone,
        remark:this.ruleForm.remark
      }).then(res => {
        // console.log(res)
        if(res.code === 200) {
          this.currentPage = 1
          this.getAllLists()
          this.$message({
            message: '添加成功',
            type: 'success'
          })
          this.$refs.ruleForm.resetFields()
          this.orderVisible = false
        }
      })
    },
    surePaid(){
      // console.log(this.formatDateTime(this.form2.orderTime))
      // console.log(this.id)
      this.paidVisible = false
      interfaceList.toBePaid({
        ToBePaidOrderNum:this.id,
        orderTime:this.formatDateTime(this.form2.orderTime)
      }).then(res => {
        console.log(res)
        if(res.code === 200){
          this.currentPage = 1
          this.getAllLists()
          this.$message({
            message: '转入成功',
            type: 'success'
          })
          this.$refs.ruleFormTh.resetFields()
          this.paidVisible = false
        }
      })
    },
    sureDelivery(){
      this.deliveryVisible = false
      // console.log(this.dialogTitle.indexOf('已派单'))
      if(this.dialogTitle.indexOf('已派单') !== -1){
        interfaceList.WaitingList({
          ToBePaidOrderNum:this.id,
          serverTime:this.formatDateTime(this.form.serverTime)
        }).then(res => {
          // console.log(res)
          if(res.code === 200){
            this.currentPage = 1
            this.getAllLists()
            this.$message({
              message: '转入成功',
              type: 'success'
            })
            this.$refs.ruleFormTw.resetFields()
            this.deliveryVisible = false
          }
        })
      }else{
        interfaceList.delivery({
          ToBePaidOrderNum:this.id,
          serverTime:this.formatDateTime(this.form.serverTime)
        }).then(res => {
          // console.log(res)
          if(res.code === 200){
            this.currentPage = 1
            this.getAllLists()
            this.$message({
              message: '转入成功',
              type: 'success'
            })
            this.$refs.ruleFormTw.resetFields()
            this.deliveryVisible = false
          }
        })
      }
    },
    handletrans(index,row){
      this.id = row.orderNum
      // console.log(data,row)
      this.paidDialogVisible = true
      switch(this.tip){
        case '已支付？':
          this.dialogTitle = '该订单已支付？(该订单将被转入待派单订单中)'
          break
        case '已派单？':
          this.dialogTitle = '该订单已派单？(该订单将被转入派送中订单中)'
          break
        case '已派送？':
          this.dialogTitle = '该订单已派送？(该订单将被转入已完成订单中)'
          break
        case '已完成？':
          this.dialogTitle = '该订单已完成，无法完成后续操作'
          break
        default:
          break
      }
    },
    suretran(){
      this.paidDialogVisible = false
      if(this.tip === '已派送？'|| this.tip === '已派单？' ){
        this.deliveryVisible = true
      }else if(this.tip === '已支付？'){
        this.paidVisible = true
      }
    }

  },
  created(){
    this.getAllLists()
  }
}
</script>



<style lang="scss" scoped>
  .orderBox{
    margin: 10px 0 0 10px;
    .title{
        font-size: 22px;
        font-family: PingFangSC-Regular;
        color: #40404C;
        letter-spacing: 0.35px;
        line-height: 28px;
        border-bottom: 0.5px solid #B9B9B9;
        margin: 32px 0 20px 20px;
    }
    .btn{
      .addOrder{
        margin-left: 100px;
      }
    }
    .dataTable{
        margin-top: 30px;
        .demo-table-expand {
          font-size: 0;
        }
        .demo-table-expand label {
          width: 90px;
          color: #99a9bf;
        }
        .demo-table-expand .el-form-item {
          margin-right: 0;
          margin-bottom: 0;
          width: 50%;
        }
    }
    .demo-ruleForm{
      position: relative;
      top: 0;
      left: 60px;
    }
    .dialog-footer{
      margin-top: -30px;
    }
  }
</style>